<template>
    <div class="changeVerify">
        <assets-head :title="title" />
        <div class="content">
            <div class="imgBox">
                <img v-if="type ==2" src="@/assets/image/userCenter/emailVerity.png" alt="" />
                <img v-if="type ==1" src="@/assets/image/userCenter/phoneVerity.png" alt="" />
                <img v-if="type ==3" src="@/assets/image/userCenter/googleVerity.png" alt="" />
            </div>
            <p>{{ type == 1 ? $t('手机验证') : type == 2 ? $t('邮箱验证') :
                $t('Google验证器APP')
                }}{{ $t('将保护您的账号和提现功能')}}</p>
            <div class="btn" @click="goChange">
                {{ type == 1 ? $t('更改手机验证') : type == 2 ? $t('更改邮箱验证') : $t('更改谷歌验证') }}
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
    export default {
        props: {

        },
        components: {
            assetsHead
        },
        data(){
            return {
                title: '',
                type:''
            }
        },
        mounted(){
            this.init()
        },
        methods: {
            init() {
                let type = this.$route.query.type;
                this.type = type;
                if (type == 1) {
                    this.title = this.$t("手机验证");
                } else if (type == 2) {
                    this.title = this.$t("邮箱验证");
                } else if (type == 3) {
                    this.title = this.$t("谷歌验证绑定");
                }
            },
            goChange(){
                this.$router.push({ name: 'resetVerify' ,query:{type:this.type}})
            }
        }
    }
</script>

<style lang="scss" scoped>
.changeVerify{
    width: 100%;
    box-sizing: border-box;
}


.content{
    font-size: 26px;
    padding: 0 32px;
    margin-top: 60px;
    text-align: center;
}

.imgBox{
    width: 176px;
    height: 176px;
    margin: auto;
    img{
        width: 100%;
        height: 100%;
    }
}
p{
    color: #868C9A;
    font-size: 28px;
    margin-top: 44px;
}
.btn {
    background: $btn_main;
    color: #000;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 44px;
    border-radius: 10px;
}
</style>